<template>
    <div class="wrap">
      <h3>我的消息</h3>
      <ul v-show="show">
        <li>
          <span>标题</span>
          <span>发送时间</span>
          <span>状态</span>
          <span>操作</span>
        </li>
        <li v-for="(item,index) in arr">
          <span>{{item.tit}}</span>
          <span>{{item.time}}</span>
          <span>{{item.state}}</span>
          <span>
            <router-link to="/mymessage2">
              <button class="btn1">查看</button>
            </router-link>
            <button class="btn2" @click="del(index)">删除</button>
          </span>
        </li>
      </ul>
      <p class="pp" v-show="show1">暂无数据,请登录</p>
    </div>
</template>

<script>
    export default {
        name: "Mymessage",
      data(){
          return{
            show:true,
            show1:false,
            arr:[
              {tit:'您的货物已发货您的货物已发货您的货物已发货',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'您的货物已发货您的货物已发货您的货物已发货',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'您的货物已发货您的货物已发货您的货物已发货',time:'2015年9月23日 15:25:07',state:'已查看'},
              {tit:'您的货物已发货您的货物已发货您的货物已发货',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'您的货物已发货您的货物已发货您的货物已发货',time:'2015年9月23日 15:25:07',state:'未查看'},
            ]
          }
      },
      methods:{
        del(i){
          this.arr.splice(i,1);
        }
      },
      mounted(){
        if(this.$store.state.phone==''){
          this.show=false;
          this.show1=true;
        }else{
          this.show=true;
          this.show1=false;
        }
      }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1063px;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    font-size: 18px;
    color: #212121;
    border-bottom: 1px solid #e7e7e7;
  }

  ul{
    width: 1040px;
    margin-top: 20px;
    margin-left: 20px;
    border: 1px solid #e9e9e9;
  }
  li{
    width: 1040px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
  }
  li:first-child{
    background: #f2f2f2;
    border-bottom:none;
  }
  li:last-child{
    border-bottom:none;
  }
  li span{
    display: inline-block;
    float: left;
    text-align: center;
    font-size: 14px;
  }
  li span:nth-child(1){
    width: 490px;
    height: 46px;
  }
  li span:nth-child(2){
    width: 270px;
    height: 46px;
  }
  li span:nth-child(3){
    width: 140px;
    height: 46px;
  }
  li span:nth-child(4){
    width: 140px;
    height: 46px;
  }
  li span:nth-child(4) button{
    background: #fff;
    color: #4b943d;
    cursor: pointer;
  }
  .btn1{
    position: relative;
    margin-right: 12px;
  }

  .btn1:before{
    position: absolute;
    top: 3px;
    right: -8px;
    content: '';
    width: 1px;
    height: 14px;
    background: #adadad;
  }

  .pp{
    width: 1083px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
  }
</style>
